<template>
    <a href="javascript:;" class="comp-market-coin">
        <i class="icon icon-coin" :class="'coin-' + coin.toLowerCase()"></i>
        <span class="text">{{coin}} / {{unit}}</span>
        <i class="icon icon-arrow-down"></i>
    </a>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                coin: '',
                unit: ''
            };
        },
        props: {
            symbol: {
                type: String,
                default: 'BTC_ETH'
            }
        },
        created(){
            // 获取icon和unit
            let ss = this.symbol.split('_');
            this.coin = ss[1].toUpperCase();
            this.unit = ss[0].toUpperCase();
        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    @import "../scss/base/var";

    .comp-market-coin {
        min-width: 152px;
        height: $height-nav;
        line-height: $height-nav;
        border-left: 1px #000 solid;
        border-right: 1px #000 solid;
        text-align: center;
        font-size: 13px;
        background-color: inherit;
        transition: all 0s ease;

        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon, .text {
            //vertical-align: middle;
        }
        .icon-coin {
            //font-size: 24px;
            //&:before {
            //    color: #fff;
            //}
            display: inline-block;
            width: 36px;
            height: 36px;
            margin-left: 16px;
                        // btc, eth, ltc, act, smc, let, omg, eos, btm, tv, usc,bcd,bch,bchc,bta,btd,btg,lbtc,sbtc,abtc,btcking,btp,yoyow,trx,ipt
            @each $coin in btc, eth, ltc, act, smc, let, omg, eos, btm, tv, usc,abtc,btp,yoyow,trx,cbtc,bck,kcash,btf,aac,emo,smcf1,vca,hmc,
                    gto, wtc, storj, salt, topc, appc {
                &.coin-#{$coin} {
                    background-image: url('../img/#{$coin}@2x.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
            }
        }
        .icon-arrow-down{
            margin: 0 16px 0 10px;
            padding: 4px;
            //border: 1px solid #5c5d5e;
            font-weight: bolder;
            color: #fff;
        }
        .text {
            color: #fff;
        }
    }
</style>